<template>
  <div id="detail">
    <div class="detail-container">
      <div class="detail-bar">
        <div class="detail-title">明细数据</div>
        <el-button type="primary" class="btn-export" @click="outExport">导出</el-button>
      </div>

      <div class="table">
        <el-table :data="tableDataList" border style="width: 100%" class="table-bgc" stripe>
          <el-table-column type="index" label="序号" width="90">
          </el-table-column>
          <el-table-column prop="orderNumber" label="单号"> </el-table-column>
          <el-table-column prop="regionType" label="桌位区域">
          </el-table-column>
          <el-table-column prop="tableName" label="桌位编号"> </el-table-column>
          <el-table-column prop="payType" label="付款方式"> </el-table-column>
          <el-table-column prop="totalPrice" label="金额"> </el-table-column>
          <el-table-column prop="staff" label="优惠额度"> </el-table-column>
          <el-table-column prop="username" label="收银员"> </el-table-column>
          <el-table-column prop="orderTime" label="时间" width="200">
          </el-table-column>
          <el-table-column prop="username" label="用户名"> </el-table-column>
          <el-table-column prop="payVoucher" label="付款凭证">
          </el-table-column>
        </el-table>
      </div>
      <Pagination @shareData="getInfo" :totalCount="totCount"></Pagination>
    </div>
  </div>
</template>

<script>
//导入全局导出文件
import exportUtils from '../exportUtils'

import bus from '../EventBus'
import Pagination from '../../common/Pagination.vue'
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      // value1: '',

      tableDataList: [],
      //当前页数
      page: 1,
      //当前页数显示的条数
      pageSize: 5,
      //数据总条数
      totCount: 0,
      //支付方式
      payType: '',
      //单号
      condition: '',
      //开始事件
      startTime: '',
      //结束事件
      endTime: '',

      //导出接口状态响应码
      code: 20000
    }
  },

  methods: {
    //调取渲染明细数据中的列表数据
    async getCashList() {
      const { data: res } = await this.axios.post('/cashierFlow/list', {
        condition: this.formInline.user,
        payType: this.formInline.region,
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.page,
        pageSize: this.pageSize
      })
      // console.log(res)
      if (res.code !== 200) return console.log('调用接口失败')

      this.tableDataList = res.data
      // console.log(this.tableDataList)

      this.totCount = res.count
      // console.log(this.totCount)

      // 遍历数组修改数据
      this.tableDataList.forEach(item => {
        // console.log(item)
        item.orderTime = this.timeTransfer(item.orderTime)
      })

      //将部分组件中的值传递给父组件
      this.$emit('getCashList', this.tableDataList, this.totCount)
    },
    //分页子组件向当前父组件传值
    getInfo(val) {
      console.log(val)
      this.page = val.nowPage
      this.pageSize = val.pageCount
      this.getCashList()
    },

    // 时间戳转换为当地时间的方法
    timeTransfer(timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let hours = time.getHours()
      let minute = time.getMinutes()

      if (month < 10) {
        month = '0' + month
      }
      if (date < 10) {
        date = '0' + date
      }
      if (hours < 10) {
        hours = '0' + hours
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute
    },

    //点击导出 调用导出接口
    outExport() {
      let params = { code: this.code }
      let myObj = {
        method: 'get',
        url: 'http://49.235.240.193:8080/admin/cashierFlow/export', //接口地址
        fileName: '收银流水',
        data: params
      }
      //调用封装方法
      exportUtils.exportMethod(myObj)
    }
  },
  created() {
    this.getCashList()

    //从兄弟组件获得最新的数据列表以及数据总条数和输入框的值，从而再次调用接口进行渲染
    bus.$on('getList', (val1, val2, val3, val4, val5) => {
      this.tableDataList = val1
      this.totCount = val2
      this.formInline.user = val3
      this.formInline.region = val4
      this.startTime = val5[0]
      this.endTime = val5[1]

      // console.log(this.newDate)

      this.getCashList()
    })
  },

  components: {
    Pagination
  }
}
</script>

<style lang="less" scoped>
.detail-container {
  background-color: #fff;
  border: 0.1rem solid #dbe0e9;
  margin-top: 2rem;
  .detail-bar {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.1rem solid #dbe0e9;
    background-color: #f2f2f2;
    .detail-title {
      height: 4rem;
      background-color: #f2f2f2;
      box-sizing: border-box;
      line-height: 4rem;
      font-size: 1.4rem;
      padding-left: 3rem;
      font-weight: 500;
      color: #666666;
    }
    .btn-export {
      margin-right: 3rem;
      font-size: 1.4rem;
      line-height: 1rem;
      padding: 8px 20px;
    }
  }
}
.sort {
  background-color: #f5f6fc;
  line-height: 2rem;
  margin: 1.5rem;
  display: flex;
  justify-content: space-around;
  .dishes {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text {
      font-size: 1.5rem;
      color: #606266;
    }
    .num {
      margin-top: 0.5rem;
      padding: 0.2rem 3rem;
      border: 0.1rem solid #dcdfe6;
    }
  }
}
.table {
  background-color: #fff;
  padding: 1.5rem;
  .el-table--border {
    background-color: #f5f6fc;
    padding: 0.5rem;
    box-sizing: border-box;
  }
}

.detail-bar {
  align-items: center;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
}
</style>
